<!-- 零钱明细页面容器 -->
<template>
  <view class="balance-container">
    <!-- 页面导航栏 -->
    <view class="nav-bar">
      <!-- 导航栏标题 -->
      <text class="nav-title">零钱明细</text>
    </view>
    <!-- 零钱明细内容区域 -->
    <view class="balance-detail">
      <!-- 交易记录列表 -->
      <view class="record-list">
      <!-- 遍历渲染每一条交易记录 -->
      <view v-for="item in records" :key="item.id" class="record-item">
        <!-- 交易时间 -->
        <view class="record-time">{{ item.time }}</view>
        <view>
          <!-- 交易金额，根据类型显示不同颜色 -->
          <view :class="['record-amount', item.type === 'recharge' ? 'income' : 'expense']">
            {{ item.type === 'recharge' ? '+' : '-' }}{{ item.amount }} 元
          </view>
          <!-- 当前余额 -->
          <view class="record-balance">余额: {{ item.balance }} 元</view>
        </view>
      </view>
    </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// 从 Vue 导入 ref 函数，用于创建响应式数据
import {ref} from 'vue'

// 定义交易记录项的接口类型
interface RecordItem {
  id: number;
  type: 'recharge' | 'refund';
  time: string;
  amount: number;
  balance: number;
}

// 创建响应式的交易记录列表
const records = ref<RecordItem[]>([// 模拟交易记录数据
  { // 第一条交易记录：充值
    id: 1,
    type: 'recharge',
    time: '2024-05-01 10:00',
    amount: 500,
    balance: 500
  },
  { // 第二条交易记录：充值
    id: 2,
    type: 'recharge',
    time: '2024-05-05 14:30',
    amount: 300,
    balance: 800
  },
  { // 第三条交易记录：退款
    id: 3,
    type: 'refund',
    time: '2024-05-10 11:15',
    amount: 100,
    balance: 700
  },
  { // 第四条交易记录：退款
    id: 4,
    type: 'refund',
    time: '2024-05-15 16:45',
    amount: 50,
    balance: 650
  }
]);
</script>

<style lang="scss">
// 页面整体容器样式
.balance-container {
  background-color: #f5f5f5;
}

// 导航栏样式
.nav-bar {
  height: 88rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1rpx solid #eee;
}

// 导航栏标题样式
.nav-title {
  font-size: 32rpx;
  font-weight: bold;
}

// 零钱明细内容区域样式
.balance-detail {
  padding: 20rpx;
  background-color: #f5f5f5;
}

// 交易记录列表样式
.record-list {
  background-color: #fff;
  border-radius: 16rpx;
}

// 单条交易记录样式
.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 20rpx;
  border-bottom: 1rpx solid #eee;
}

// 最后一条交易记录去除底部边框
.record-item:last-child {
  border-bottom: none;
}

// 交易时间样式
.record-time {
  font-size: 28rpx;
  color: #666;
}

// 交易金额基础样式
.record-amount {
  font-size: 32rpx;
}

// 当前余额样式
.record-balance {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

// 收入金额颜色样式
.income {
  color: #09bb07;
}

// 支出金额颜色样式
.expense {
  color: #e64340;
}
</style>